<template>
    <div v-if="show" class="dialog-mask">
        <div class="dialog">
            <h3>{{title}}</h3>
            <p>{{msg}}</p>
            <button @click="$emit('confirmResult','OK')">确定</button>
            <button v-focus @click="$emit('confirmResult','CANCEL')">取消</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'confirm-dlg',
    directives: {
        focus: {
            // 指令的定义
            inserted: function (el) {
                el.focus()
            }
        }
    },
    props:{
        title :{
            type: String,
            required: true
        },
        msg: {
            type: String,
            required: true
        },
        show: {
            type: Boolean,
            required: true
        }
    }
}
</script>

<style scoped>
.dialog-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.8);
}
.dialog{
    background-color: white;
    position: absolute;
    min-height: 150px;
    width: 30%;
    left: 50%;
    top: 250px;
    margin-left: -15%;
    text-align: center;
    padding: 10px 20px;
    /* margin-top: -25%; */
}
</style>
